<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>桃子</title>
    <style>
        .content{
            position: relative;
            background-image: url("./img/bg.jpg");
            width: 1146px;
            height: 631px;
        }
        .peach{
            position: absolute;
            display: inline-block;
            width: 90px;
            height: 100px;
            background-image: url("./img/peach.png") ;
            background-repeat: no-repeat;
            transform-origin: 50% 0;
            
        }
        .peach1{
            top:0px;      
            left:0px;     
            background-position: 0 0; 
            animation: shake 3s infinite;
        }   
        .peach2{
            top:150px;      
            left:200px;  
            background-position: 0 -115px;    
            animation: shake 2.5s infinite; 
        }      
        .peach3{
            top:350px;      
            left:400px;     
            background-position: 0 -215px;   
            animation: shake 1.5s infinite;   
        }        
        .peach4{
            top:150px;      
            left:600px;    
            background-position: 0 -328px;    
            animation: shake 2s infinite;   
        }        
        .peach5{
            top:350px;      
            left:200px;     
            background-position: 0 -435px; 
            animation: shake 3s infinite 0.5s;     
        }        
        .peach6{
            top:150px;      
            left:400px;     
            background-position: 0 -545px; 
            animation: shake 2s infinite 0.5s;     
        }    
        @keyframes shake {
            0%{
                transform: rotate(2deg);
            }
            20%{
                transform: rotate(10deg);
            }
            40%{
                transform: rotate(0deg);
            }
            60%{
                transform: rotate(-2deg);
            }
            80%{
                transform: rotate(-10deg);
            }
            100%{
                transform: rotate(0deg);
            }
        }           
    </style>
</head>
<body>
    <div class="content">
        <p>摇晃的桃子</p>
        <span class="peach peach1"></span>
        <span class="peach peach2"></span>
        <span class="peach peach3"></span>
        <span class="peach peach4"></span>
        <span class="peach peach5"></span>
        <span class="peach peach6"></span>
    </div>
</body>
</html>